@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
@import 'tailwindcss';
@import 'fumadocs-ui/css/shadcn.css';
@import 'fumadocs-ui/css/preset.css';


@custom-variant dark (&:is(.dark *));

@layer base {
	:root {
		color-scheme: light;
		--font-geist: 'Geist', sans-serif;
		--font-geist-mono: 'Geist Mono', monospace;
		--background: oklch(0.9881 0 0);
		--foreground: oklch(0.1881 0.0060 285.8056);
		--card: oklch(1.0000 0 0);
		--card-foreground: oklch(0.1881 0.0060 285.8056);
		--card-gradient: linear-gradient(to bottom right, oklch(1.0000 0 0), oklch(1.0000 0 0), oklch(0.9881 0 0));
		--popover: oklch(0.9881 0 0);
		--popover-foreground: oklch(0.1881 0.0060 285.8056);
		--primary: oklch(0.5820 0.2289 272.7771);
		--primary-foreground: oklch(0.9851 0 0);
		--secondary: oklch(0.9524 0.0013 286.3747);
		--secondary-foreground: oklch(0.1881 0.0060 285.8056);
		--muted: oklch(0.9674 0.0013 286.3752);
		--muted-foreground: oklch(0.5343 0.0139 285.9192);
		--accent: oklch(0.9524 0.0013 286.3747);
		--accent-foreground: oklch(0.1881 0.0060 285.8056);
		--destructive: oklch(0.5785 0.2138 27.1723);
		--destructive-foreground: oklch(0.9851 0 0);
		--border: oklch(0.8714 0.0068 286.2574);
		--input: oklch(0.8714 0.0068 286.2574);
		--ring: oklch(0.5820 0.2289 272.7771);
		--chart-1: oklch(0.8688 0.1348 154.6144);
		--chart-2: oklch(0.5820 0.2289 272.7771);
		--chart-3: oklch(0.7118 0.0129 286.0665);
		--chart-4: oklch(0.9197 0.0040 286.3202);
		--chart-5: oklch(0.5343 0.0139 285.9192);
		--sidebar: oklch(0.9794 0.0013 286.3747);
		--sidebar-foreground: oklch(0.1881 0.0060 285.8056);
		--sidebar-primary: oklch(0.5820 0.2289 272.7771);
		--sidebar-primary-foreground: oklch(1.0000 0 0);
		--sidebar-accent: oklch(0.9674 0.0013 286.3752);
		--sidebar-accent-foreground: oklch(0.1881 0.0060 285.8056);
		--sidebar-border: oklch(0.8714 0.0068 286.2574);
		--sidebar-ring: oklch(0.5820 0.2289 272.7771);
		--font-sans: 'Inter', system-ui, sans-serif;
		--font-serif: 'Georgia', serif;
		--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
		--radius: 0.5rem;
		--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
		--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
		--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
		--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
		--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
		--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
		--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
		--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
		--tracking-normal: 0em;
		--spacing: 0.25rem;
	}

	.dark {
		color-scheme: dark;
		--font-geist: 'Geist', sans-serif;
		--font-geist-mono: 'Geist Mono', monospace;
		--background: oklch(0.1252 0.0018 286.1313);
		--foreground: oklch(0.9674 0.0013 286.3752);
		--card: oklch(0.1717 0.0018 286.2103);
		--card-foreground: oklch(0.9674 0.0013 286.3752);
		--card-gradient: linear-gradient(to bottom right, rgb(24 24 27), rgb(24 24 27), rgb(39 39 42));
		--popover: oklch(0.2100 0.0025 286.1774);
		--popover-foreground: oklch(0.9674 0.0013 286.3752);
		--primary: oklch(0.5820 0.2289 272.7771);
		--primary-foreground: oklch(0.1252 0.0018 286.1313);
		--secondary: oklch(0.2120 0.0047 285.9459);
		--secondary-foreground: oklch(0.9674 0.0013 286.3752);
		--muted: oklch(0.1903 0.0049 285.8852);
		--muted-foreground: oklch(0.6879 0.0091 286.1398);
		--accent: oklch(0.2332 0.0046 285.9939);
		--accent-foreground: oklch(0.9674 0.0013 286.3752);
		--destructive: oklch(0.5618 0.1955 26.2182);
		--destructive-foreground: oklch(0.9674 0.0013 286.3752);
		--border: oklch(0.2947 0.0061 285.9873);
		--input: oklch(0.2539 0.0045 286.0326);
		--ring: oklch(0.5820 0.2289 272.7771);
		--chart-1: oklch(0.7362 0.0089 286.1606);
		--chart-2: oklch(0.5820 0.2289 272.7771);
		--chart-3: oklch(0.6944 0.0090 286.1428);
		--chart-4: oklch(0.4356 0.0103 285.9442);
		--chart-5: oklch(0.5213 0.0129 285.9271);
		--sidebar: oklch(0.1903 0.0049 285.8852);
		--sidebar-foreground: oklch(0.9674 0.0013 286.3752);
		--sidebar-primary: oklch(0.5820 0.2289 272.7771);
		--sidebar-primary-foreground: oklch(0.1903 0.0049 285.8852);
		--sidebar-accent: oklch(0.2332 0.0046 285.9939);
		--sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
		--sidebar-border: oklch(0.2947 0.0061 285.9873);
		--sidebar-ring: oklch(0.5820 0.2289 272.7771);
		--font-sans: 'Inter', system-ui, sans-serif;
		--font-serif: 'Georgia', serif;
		--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
		--radius: 0.5rem;
		--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
		--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
		--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
		--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
		--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
		--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
		--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
		--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
		--tracking-normal: 0em;
		--spacing: 0.25rem;
	}

	* {
		scrollbar-width: thin;
		#nd-nav > div > nav {
			@apply max-w-6xl mx-auto px-4 md:!px-0;
		}

		article {
			@apply bg-card;
		}

		#nd-docs-layout {
			@apply !bg-card;
		}

		#nd-page {
			@apply flex flex-1 w-full mx-auto max-w-(--fd-page-width) pt-(--fd-tocnav-height) pe-(--fd-toc-width)
		}
	}

	*::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	*::-webkit-scrollbar-thumb {
		background-color: hsl(var(--muted));
		border-radius: 9999px;
	}

	.dark *::-webkit-scrollbar-thumb {
		background-color: hsl(var(--muted));
	}

	*::-webkit-scrollbar-track {
		background-color: transparent;
	}

	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-border, currentColor);
	}

	button {
		cursor: pointer;
	}

	body {
		@apply bg-background text-foreground antialiased;
	}
}

@layer base {
	:root {
		--color-fd-background: hsl(0, 0%, 96%);
		--color-fd-foreground: hsl(0, 0%, 3.9%);
		--color-fd-muted: hsl(0, 0%, 96.1%);
		--color-fd-muted-foreground: hsl(0, 0%, 45.1%);
		--color-fd-popover: hsl(0, 0%, 98%);
		--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
		--color-fd-card: hsl(0, 0%, 94.7%);
		--color-fd-card-foreground: hsl(0, 0%, 3.9%);
		--color-fd-border: hsla(0, 0%, 80%, 50%);
		--color-fd-primary: oklch(0.5820 0.2289 272.7771) !important;
		--color-fd-primary-foreground: oklch(0.9851 0 0) !important;
		--color-fd-secondary: hsl(0, 0%, 93.1%);
		--color-fd-secondary-foreground: hsl(0, 0%, 9%);
		--color-fd-accent: hsla(0, 0%, 82%, 50%);
		--color-fd-accent-foreground: hsl(0, 0%, 9%);
		--color-fd-ring: hsl(0, 0%, 63.9%);
	}

	.dark {
		--color-fd-background: hsl(0, 0%, 7.04%);
		--color-fd-foreground: hsl(0, 0%, 92%);
		--color-fd-muted: hsl(0, 0%, 12.9%);
		--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
		--color-fd-popover: hsl(0, 0%, 11.6%);
		--color-fd-popover-foreground: hsl(0, 0%, 86.9%);
		--color-fd-card: hsl(0, 0%, 9.8%);
		--color-fd-card-foreground: hsl(0, 0%, 98%);
		--color-fd-border: hsla(0, 0%, 40%, 20%);
		--color-fd-primary: oklch(0.5820 0.2289 272.7771) !important;
		--color-fd-primary-foreground: oklch(0.9851 0 0) !important;
		--color-fd-secondary: hsl(0, 0%, 12.9%);
		--color-fd-secondary-foreground: hsl(0, 0%, 92%);
		--color-fd-accent: hsla(0, 0%, 40.9%, 30%);
		--color-fd-accent-foreground: hsl(0, 0%, 90%);
		--color-fd-ring: hsl(0, 0%, 54.9%);
	}

	.dark #nd-sidebar {
		--color-fd-muted: hsl(0, 0%, 16%);
		--color-fd-secondary: hsl(0, 0%, 18%);
		--color-fd-muted-foreground: hsl(0, 0%, 72%);
	}
}

@theme inline {
	--font-geist: var(--font-geist);
	--font-geist-mono: var(--font-geist-mono);
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-card-gradient: var(--card-gradient);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: oklch(0.5820 0.2289 272.7771);
	--color-primary-foreground: oklch(0.9851 0 0);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--font-sans: var(--font-sans);
	--font-mono: var(--font-mono);
	--font-serif: var(--font-serif);

	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--shadow-2xs: var(--shadow-2xs);
	--shadow-xs: var(--shadow-xs);
	--shadow-sm: var(--shadow-sm);
	--shadow: var(--shadow);
	--shadow-md: var(--shadow-md);
	--shadow-lg: var(--shadow-lg);
	--shadow-xl: var(--shadow-xl);
	--shadow-2xl: var(--shadow-2xl);

	--tracking-normal: var(--tracking-normal);
	--spacing: var(--spacing);
}

@layer utilities {
	.bg-card-gradient {
		background: var(--card-gradient);
	}
}

/* View Transitions for Theme Switching */
@supports (view-transition-name: none) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
		mix-blend-mode: normal;
	}

	::view-transition-old(root) {
		/* Ensure the outgoing view (old theme) is beneath */
		z-index: 0;
	}

	::view-transition-new(root) {
		/* Ensure the incoming view (new theme) is always on top */
		z-index: 1;
		/* Apply the reveal animation */
		animation: reveal 0.4s ease-in-out forwards;
	}

	@keyframes reveal {
		from {
			/* Use CSS variables for the origin, defaulting to center if not set */
			clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
			opacity: 0.7;
		}
		to {
			/* Use CSS variables for the origin, defaulting to center if not set */
			clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
			opacity: 1;
		}
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	::view-transition-new(root) {
		animation-duration: 0.1s !important;
	}
}

/* User Preferences CSS */

/* Compact Mode - Reduce padding and spacing throughout the app */
.compact-mode {
  --spacing-factor: 0.75;
}

.compact-mode [data-sidebar="sidebar"] {
  --sidebar-width: calc(var(--spacing) * 52);
}

.compact-mode .p-1 { padding: calc(0.25rem * var(--spacing-factor, 1)); }
.compact-mode .p-2 { padding: calc(0.5rem * var(--spacing-factor, 1)); }
.compact-mode .p-3 { padding: calc(0.75rem * var(--spacing-factor, 1)); }
.compact-mode .p-4 { padding: calc(1rem * var(--spacing-factor, 1)); }
.compact-mode .p-6 { padding: calc(1.5rem * var(--spacing-factor, 1)); }

.compact-mode .gap-1 { gap: calc(0.25rem * var(--spacing-factor, 1)); }
.compact-mode .gap-2 { gap: calc(0.5rem * var(--spacing-factor, 1)); }
.compact-mode .gap-3 { gap: calc(0.75rem * var(--spacing-factor, 1)); }
.compact-mode .gap-4 { gap: calc(1rem * var(--spacing-factor, 1)); }

.compact-mode .space-y-1 > * + * { margin-top: calc(0.25rem * var(--spacing-factor, 1)); }
.compact-mode .space-y-2 > * + * { margin-top: calc(0.5rem * var(--spacing-factor, 1)); }
.compact-mode .space-y-3 > * + * { margin-top: calc(0.75rem * var(--spacing-factor, 1)); }
.compact-mode .space-y-4 > * + * { margin-top: calc(1rem * var(--spacing-factor, 1)); }

/* Theme-specific overrides */
.theme-light {
  --primary-accent: oklch(0.5820 0.2289 272.7771);
}

.theme-dark {
  --primary-accent: oklch(0.6820 0.1989 272.7771);
}

.theme-system {
  --primary-accent: oklch(0.5820 0.2289 272.7771);
}

@media (prefers-color-scheme: dark) {
  .theme-system {
    --primary-accent: oklch(0.6820 0.1989 272.7771);
  }
}

* {
  font-family: var(--font-geist);
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInDelay {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInDelay2 {
  0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInDelay3 {
  0% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-in-delay {
  animation: fadeInDelay 0.4s ease-out forwards;
}

.animate-fade-in-delay-2 {
  animation: fadeInDelay2 0.5s ease-out forwards;
}

.animate-fade-in-delay-3 {
  animation: fadeInDelay3 0.6s ease-out forwards;
}

.animate-fade-in-up-0 {
  animation: fadeInUp 0.3s ease-out forwards;
  animation-delay: 0.05s;
}

.animate-fade-in-up-1 {
  animation: fadeInUp 0.3s ease-out forwards;
  animation-delay: 0.1s;
}

.animate-fade-in-up-2 {
  animation: fadeInUp 0.3s ease-out forwards;
  animation-delay: 0.15s;
}

.animate-fade-in-up-3 {
	animation: fadeInUp 0.3s ease-out forwards;
	animation-delay: 0.2s;
}

/* Ensure --text-fd-primary matches current primary, with highest precedence */
@layer base {
	:root,
	html,
	body,
	#nd-root {
		--text-fd-primary: oklch(0.5820 0.2289 272.7771) !important;
	}

	html.dark,
	.dark,
	body.dark,
	#nd-root.dark {
		--text-fd-primary: var(--primary) !important;
	}
	
	code,
	code *,
	code span,
	pre code,
	pre code *,
	pre code span {
		font-family: 'Geist Mono', monospace !important;
	}
}
